<!-- <template>
  <div class="form">
    <div class="top">
      <el-steps :active="infoStore.active" align-center>
        <el-step v-for="(step, index) in steps" :key="index" :title="'step' + (index + 1)" :description="step">
        </el-step>
      </el-steps>
    </div>
    <div class="content">
      <Student ref="form1" v-show="infoStore.active === 1" />
      <Education ref="form2" v-show="infoStore.active === 2" />
      <Work ref="form3" v-show="infoStore.active === 3" />
      <Health ref="form4" v-show="infoStore.active === 4" />
    </div>
    <div class="bottom">
      <el-row justify="center">
        <el-col :span="3" v-show="infoStore.active > 1">
          <el-button type="primary" :icon="ArrowLeft" @click="goLastPage">上一页</el-button>
        </el-col>
        <el-col :span="3" v-show="infoStore.active < 4">
          <el-button type="primary" :icon="ArrowRight" @click="goNextPage">下一页</el-button>
        </el-col>
        <el-col :span="3" v-show="infoStore.active == 4">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { onMounted, ref, getCurrentInstance } from 'vue'
import useInfoStore from '@/store/info/index'
import Student from './Student.vue'
import Education from './Education.vue'
import Work from './Work.vue'
import Health from './Health.vue'

const { proxy } = getCurrentInstance()
const steps = [
  "个人信息",
  "教育或者培训经历",
  "工作经历",
  "健康状况",
]
const form1 = ref(null)
const form2 = ref(null)
const form3 = ref(null)
const form4 = ref(null)
const infoStore = useInfoStore()
const goLastPge = () => {
  infoStore.toLastPage();
};
const goNextPage = () => {
  infoStore.toNextPage();
};
const submit = () => {
  alert("提交");
};


const baseURL = "http://localhost:8080"
const postEducation = function() {
  proxy.$axios.post(baseURL + '/education', proxy.$refs.form2.tableData)
  .then(function (response) {
    const {data:res} = response
    console.log(res)
   });
    
const postWork = function() {
    proxy.$axios.post(baseURL + '/work', proxy.$refs.form3.tableData)
  .then(function (response) {
    const {data:res} = response
    console.log(res)
  });
  }

const postHealth = function() {
  proxy.$axios.post(baseURL + '/health', proxy.$refs.form4.health)
  .then(function (response) {
    const {data:res} = response
    console.log(res)
  });
}

const postStudent = function() {
  proxy.$axios.post(baseURL + '/student', proxy.$refs.form1.student)
  .then(function (response) {
    const {data:res} = response
    console.log(res)
  });
}




</script>


<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.content {
  border: 1px solid #e7e7e7;
  margin-left: 10%;
  margin-right: 10%;
}

.bottom {
  margin-top: 30px;
}

from {
  width: 1000px;
}
</style>
 -->

<template>

</template>